<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>03_重复渐变</title>
</head>
<style>
  .box{
    width: 300px;
    height: 200px;
    border: 1px solid black;
    float: left;
    margin-left: 50px;
    font-size: 25px;
  }


  .box4{
    /* 设置颜色高度值的线性渐变 */
    background-image: repeating-linear-gradient(red 50px,yellow 100px,green 150px);
  }

  .box6{
    background-image: repeating-radial-gradient(red 50px,yellow 100px,green 150px);
  }



</style>
<body>
  
  <div class="box box4">重复线性渐变</div>
  <div class="box box6">重复径向渐变</div>


</body>
</html>